<template>
    <div class="login-bg">
        <div class="login-left">
            <div class="welcomeTip">欢迎进入项目管理系统</div>
            <div class="title">精细化地理信息管理系统</div>
            <div class="login-content">
                <el-form
                    :model="loginForm"
                    :rules="rules"
                    ref="loginForm"
                    label-width="0px"
                    class="ms-content"
                    @submit.native.prevent
                >
                    <el-form-item prop="username" class="formItem">
                        <span class="icon">
                            <img src="../../assets/img/shouji.png" alt="用户" />
                        </span>
                        <el-input
                            v-model="loginForm.username"
                            placeholder="请输入用户名"
                            class="inputLogin"
                            type="text"
                            @keyup.native="changeCode"
                        ></el-input>
                        <!-- <input v-model="loginForm.username" placeholder="请输入用户名" class="inputLogin" οninput="this.value=this.value.replace(/[^\w_]/g,'');" > -->
                    </el-form-item>
                    <el-form-item prop="password" class="formItem">
                        <span class="icon">
                            <img src="../../assets/img/yanzhengma.png" alt="密码" />
                        </span>
                        <el-input
                            type="password"
                            v-model="loginForm.password"
                            placeholder="请输入密码"
                            class="inputLogin"
                            maxlength="15"
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="formItem checkRememberPassword">
                        <el-checkbox-group
                            v-model="loginForm.hasRememberPassword"
                            class="inputLogin"
                        >
                            <el-checkbox
                                label="记住密码"
                                name="hasRememberPassword"
                                class="rememberTip"
                            ></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <p v-show="hasLoginErr" class="errTips">* 账户名或密码输入错误</p>
                    <div class="inputLogin">
                        <i class="el-icon-loading iconLoading" v-show="hasLoading">
                            <img src="../../assets/img/loading.png" style="width:26px;height:26px;" />
                        </i>
                        <button
                            class="loginBtn"
                            @click="loginSubmit('loginForm')"
                        >{{ loginBtnText }}</button>
                    </div>
                </el-form>

                <div class="footTip">
                    <span class="logoTip">
                        <img src="../../assets/img/logo.png" alt="logo" />
                    </span>
                    <p>浙江正元地理信息有限责任公司</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
//密码格式正则表达式(6~20位，数字+字母)
// let patter = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
//密码格式校验
// let isValidatorPassword = (rule, value, callback) => {
//     if (!patter.test(value)) {
//         return callback(new Error('请输入6-20位密码，至少使用字母、数字组合'));
//     } else {
//         callback();
//     }
// };
//输入框的内容检验
// let patter = /[^\w_]/g;
// let isValidatorValue = (rule, value, callback) => {
//     if (!patter.test(value)) {
//         return callback(new Error('请输入数字或英文'));
//     } else {
//         callback();
//     }
// };
import { userLogin, oauthtoken } from '@/api/index.js';
//导入节流工具函数
import { throttle } from '@/utils/tools.js';
//导入cook
import Cookies from 'js-cookie';
export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
                hasRememberPassword: false
            },
            loginFlag: false, //判断登录方式 false(输入账户和密码登录),true（记住密码登录）
            hasLoginErr: false,
            // hasLoginErrMessage:"",
            hasLoading: false,
            loginBtnText: '登录',
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' }

                    // { validator: isValidatorPassword }
                ]
            }
        };
    },

    mounted() {
        this.hasRememberPassword();
    },
    methods: {

        hasRememberPassword() {
            let account = Cookies.get('account');
            let password = Cookies.get('password');
           
            if (account && password) {
               console.log(JSON.parse(decodeURIComponent(password)))
                this.loginForm.username = account;
                this.loginForm.password = JSON.parse(decodeURIComponent(password));
                this.loginForm.hasRememberPassword = true;
                this.loginFlag = true;
            } else {
                this.loginFlag = false;
                this.loginForm.hasRememberPassword = false;
            }
        },

        //处理用户输入账号
        changeCode() {
            this.loginForm.password = '';
            this.$nextTick(() => {
                if (this.loginForm.username !== null) {
                    this.loginForm.username = this.loginForm.username.replace(/[\u4E00-\u9FA5]/g, '');
                }
            });
        },

        loginSubmit: throttle(function (formName) {
            // const self = this;
            // if(self.loginForm.hasRememberPassword ==true){
            //     //传入账号名，密码，和保存天数3个参数
            //     self.setCookie(self.loginForm.username, self.loginForm.password, 7)
            // }
            // else {
            //               //清空Cookie
            //         self.clearCookie();
            //     }
            // debugger
            this.hasLoginErr = false;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.hasLoading = true;
                    this.loginBtnText = '登录中,请稍后';
                    let form;
                    if (!this.loginFlag) {
                        form = {
                            username: this.loginForm.username,
                            password: this.$md5(this.loginForm.password),
                            hasRememberPassword: this.loginForm.hasRememberPassword
                        };
                    } else {
                        form = {
                            username: this.loginForm.username,
                            password: this.$md5(this.loginForm.password),
                            hasRememberPassword: this.loginForm.hasRememberPassword
                        };
                    }
                    if (form.hasRememberPassword) {
                        Cookies.set('account',  this.loginForm.username, { expires: 7 });
                        Cookies.set('password', encodeURIComponent(JSON.stringify(this.loginForm.password)), { expires: 7 });
                    } else {
                        Cookies.remove('account');
                        Cookies.remove('password');
                    }
                    userLogin(form).then((res) => {
                        console.log(res);
                        if (res.code === 200) {
                            oauthtoken({
                                username: this.loginForm.username,
                                password: this.$md5(this.loginForm.password),
                                grant_type: 'password',
                                client_id: 'client-app',
                                client_secret: 123456
                            }).then((res) => {
                                console.log('token', res);
                                // 存到缓存
                                localStorage.setItem('token', res.data. tokenHead+res.data.token);
                            });
                            this.$message({
                                type: 'success',
                                message: '登录成功'
                            });
                            // this.$router.push('/tongyiindex')
                            localStorage.setItem('type', res.result.type);
                            localStorage.setItem('userid', res.result.id);
                            localStorage.setItem('deptid', res.result.deptid);
                            localStorage.setItem('projectid', res.result.username);
                            localStorage.setItem('projectname', res.result.projectname);
                            this.$router.replace('/tongyiindex');
                        } else if (res.code === 201) {
                            this.hasLoginErr = true;
                        } else {
                            // this.hasLoginErr = true;
                            this.$message({
                                type: 'error',
                                message: '网络繁忙,登录失败,请稍后再试'
                            });
                        }
                        this.hasLoading = false;
                        this.loginBtnText = '登录';
                    });
                } else {
                    return false;
                }
            });
        }, 3000)
    }
};
</script>
<style lang="scss">
.login-bg {
    // position: relative;
    width: 100%;
    height: 100%;
    min-width: 800px;
    background-image: url(../../assets/img/login-bg.png);
    background-size: 100% 100%;
    // box-sizing: border-box;
    .rememberTip {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        width: 56px;
        height: 19px;
        line-height: 19px;
        padding: 0px;
        padding-left: 5px;
        color: rgba(204, 204, 204, 1);
    }
    /deep/.el-checkbox__inner {
        border: 1px solid rgba(216, 216, 216, 1);
        border-radius: none;
    }
    @media screen and (min-width: 1600px) {
        .login-left {
            height: 100%;
            width: 600px;
            margin-left: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            // border: 1px solid #fff;
            padding-right: 185px;
            font-family: PingFangSC-Light, PingFang SC;
        }

        .welcomeTip {
            width: 400px;
            height: 56px;
            line-height: 56px;
            color: #fff;
            font-size: 40px;
            font-weight: 300;
            padding-top: 167px;
        }
        .title {
            width: 34.75rem /* 508/16 */;
            height: 70px;
            line-height: 70px;
            font-size: 50px;
            font-weight: 500;
            color: #fff;
            margin-bottom: 93px;
            
font-family: PingFangSC-Medium, PingFang SC;
        }
        .formItem {
            width: 320px;
            margin-bottom: 0px;
            position: relative;
            .el-input__inner {
                height: 60px;
                line-height: 60px;
                padding-left: 66px;
                margin-top: 46px;
                font-size: 16px;
            }
            .icon {
                width: 26px;
                height: 26px;
                position: absolute;
                left: 20px;
                bottom: 17px;
                z-index: 1;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .checkRememberPassword,
        .errTips {
            margin-top: 15px;
        }
        .errTips {
            color: #ff6600;
            font-size: 14px;
            font-weight: 400;
            width: 152px;
            height: 20px;
            line-height: 20px;
        }
        .inputLogin {
            position: relative;
            .iconLoading {
                position: absolute;
                left: 50px;
                bottom: 12px;
                font-size: 36px;
                // line-height:56px;
                color: #d8d8d8;
            }
        }
        .loginBtn {
            width: 320px;
            height: 60px;
            border: none;
            outline: none;
            margin-top: 30px;
            line-height: 60px;
            background: #004fab;
            color: #fff;
            font-size: 22px;
            border-radius: 30px;
            box-shadow: 0px 5px 10px -3px rgba(0, 0, 0, 0.2);
        }
        .footTip {
            width: 320px;
            height: 38px;
            display: flex;
            color: #fff;
            margin-top: 100px;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            .logoTip {
                width: 38px;
                height: 38px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                font-size: 18px;
                height: 25px;
            }
        }
    }
    @media screen and (min-width: 1366px) and (max-width: 1600px) {
        .login-left {
            height: 100%;
            width: 600px;
            margin-left: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            // border: 1px solid #fff;
            padding-right: 120px;
            font-family: PingFangSC-Light, PingFang SC;
        }
        .welcomeTip {
            width: 320px;
            height: 56px;
            line-height: 56px;
            color: #fff;
            font-size: 32px;
            font-weight: 300;
            padding-top: 140px;
            text-align: center;
        }
        .title {
            width: 34.75rem /* 508/16 */ !important;
            height: 70px;
            line-height: 70px;
            font-size: 46px;
            font-weight: 500;
            color: #fff;
            margin-bottom: 40px;
            text-align: center;
            
font-family: PingFangSC-Medium, PingFang SC;
        }
        .formItem {
            width: 320px;
            margin-bottom: 0px;
            position: relative;
            .el-input__inner {
                height: 54px;
                line-height: 54px;
                padding-left: 66px;
                margin-top: 46px;
                font-size: 16px;
            }
            .icon {
                width: 24px;
                height: 24px;
                position: absolute;
                left: 20px;
                bottom: 17px;
                z-index: 1;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .checkRememberPassword,
        .errTips {
            margin-top: 15px;
        }
        .errTips {
            color: #ff6600;
            font-size: 14px;
            font-weight: 400;
            width: 152px;
            height: 20px;
            line-height: 20px;
        }
        .inputLogin {
            position: relative;
            .iconLoading {
                position: absolute;
                left: 50px;
                bottom: 12px;
                font-size: 36px;
                // line-height:56px;
                color: #d8d8d8;
            }
        }

        .loginBtn {
            width: 320px;
            height: 60px;
            border: none;
            outline: none;
            margin-top: 30px;
            line-height: 60px;
            background: #004fab;
            color: #fff;
            font-size: 22px;
            border-radius: 30px;
            box-shadow: 0px 5px 10px -3px rgba(0, 0, 0, 0.2);
        }
        .footTip {
            width: 320px;
            height: 38px;
            display: flex;
            color: #fff;
            margin-top: 60px;
            justify-content: space-between;
            align-items: center;
            .logoTip {
                width: 36px;
                height: 36px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                font-size: 18px;
            }
        }
    }
    @media screen and (max-width: 1366px) {
        .login-left {
            height: 100%;
            width: 400px;
            margin-left: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            // border: 1px solid #fff;
            padding-right: 120px;
            font-family: PingFangSC-Light, PingFang SC;
        }
        .welcomeTip {
            width: 320px;
            height: 56px;
            line-height: 56px;
            color: #fff;
            font-size: 30px;
            font-weight: 300;
            padding-top: 100px;
            text-align: center;
        }
        .title {
            width: 34.75rem /* 508/16 */;
            height: 50px;
            line-height: 70px;
            font-size: 42px;
            font-weight: 500;
            color: #fff;
            margin-bottom: 20px;
            text-align: center;
            
font-family: PingFangSC-Medium, PingFang SC;
        }
        .formItem {
            width: 320px;
            margin-bottom: 0px;
            position: relative;
            .el-input__inner {
                height: 48px;
                line-height: 48px;
                padding-left: 66px;
                margin-top: 46px;
                font-size: 16px;
                color: rgba(204, 204, 204, 1);
            }
            .icon {
                width: 20px;
                height: 20px;
                position: absolute;
                left: 20px;
                bottom: 17px;
                z-index: 1;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .checkRememberPassword,
        .errTips {
            margin-top: 15px;
        }
        .errTips {
            color: #ff6600;
            font-size: 14px;
            font-weight: 400;
            width: 152px;
            height: 20px;
            line-height: 20px;
        }
        .inputLogin {
            position: relative;
            .iconLoading {
                position: absolute;
                left: 50px;
                bottom: 12px;
                font-size: 36px;
                // line-height:56px;
                color: #d8d8d8;
            }
        }
        .loginBtn {
            width: 320px;
            height: 48px;
            border: none;
            outline: none;
            margin-top: 30px;
            line-height: 48px;
            background: #004fab;
            color: #fff;
            font-size: 22px;
            border-radius: 30px;
            box-shadow: 0px 5px 10px -3px rgba(0, 0, 0, 0.2);
        }
        .footTip {
            width: 320px;
            height: 38px;
            display: flex;
            color: #fff;
            margin-top: 60px;
            justify-content: space-between;
            align-items: center;
            .logoTip {
                width: 36px;
                height: 36px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                font-size: 18px;
            }
        }
    }

    /deep/.el-icon-loading:before {
        content: '';
    }
    /deep/.el-checkbox__label {
        padding-left: 7px;
    }
}
</style>
